Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
ایجاکس در jquery 

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید .

متد size در jQuery 

متد size ، تعداد عناصر DOM ای که با مشخصات تعیین شده برای آن در پارامتر selector$ ، مطابقت دارند را بر می گرداند .
به عبارت دیگر ،متد size برای شمارش تعداد یک عنصر یا تگ مورد نظر ، بر روی صفحه استفاده می شود .
شکل کلی استفاده از متد size به صورت زیر است :

$(selector).size( ) ;

مثال زیر کاربرد متد size را نشان میدهد .

$("button").click(function(){
alert($("li").size());
});

متد toArray در jQuery 

متد toArray ، کلیه عناصری که با مشخصات داده شده در پارامتر selector$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .
شکل کلی استفاده از متد toArray به صورت زیر است :

 $(selector).toArray( ) ;

مثال زیر کاربرد متد toArray را نشان میدهد .

$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});

متد $.param در jQuery

متد $.param ، می تواند اعضای یک آرایه یا مجموعه خواص یک شی را به صورت پشت سر هم و جفت نام-مقدار ، خوانده و به صفحه بر گرداند .
برای مثال فرض کنید که یک شی 3 خاصیت داشته باشد . خروجی این متد در هنگام استفاده به صورت زیر می باشد :

prop1 = value1 & prop2 = value2 & prop3 = value3 ;

از این رشته خواص و یا اعضای آرایه می توان برای ارسال اطلاعات در روش get استفاده کرد . این اطلاعات در انتهای آدرس URL صفحه اضافه شده و به صفحه مقصد ارسال می شوند .
شکل کلی استفاده از متد $.param به صورت زیر است :

$.param( object ) ;

obj : تعیین کننده نام شی یا آرایه ای است که می خواهیم مجموعه اعضا و یا خواص آن را به صورت پشت سر هم نمایش دهیم . 
استفاده از این پارامتر اجباری است . 

مثال زیر کاربرد متد $.param را نشان میدهد .

$("button").click(function(){
$("div").text($.param(personObj));
});

متد removeData در jQuery

متد removeData ، می تواند اطلاعات اضافه شده به یک عنصر را که قبلا توسط متد ( ) data اضافه شده است ، را حذف نماید .
 اگر اطلاعاتی قبلا توسط متد ( ) data ، به عنصر اضافه نشده باشد ، این متد کار نمی کند .

شکل کلی استفاده از متد removeData در این حالت به صورت زیر است :

$( selector ).removeData ( name ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را حذف نماییم . 
name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را حذف نمایید .
استفاده از این پارامتر اختیاری است .
اگر این پارامتر تعیین نشود ، کلیه اطلاعات موجود در عنصر حذف خواهد شد . 

مثال زیر کاربرد  متد removeData را نشان میدهد .

$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});

متد $.noConflict (جلوگیری از تداخل کدها در jQuery)

برخی از فریم ورک های جاوا اسکریپت نیز از علامت $ در کدهای خود استفاده می کنند ، مثل فریم ورکهای BackBone یا GoogleWebToolkit . حال اگر jQuery و یک فریم ورک دیگر در یک صفحه بصورت همزمان از علامت $ استفاده نمایند ، ممکن است در اجرای اسکریپت دچار مشکل شوید و کد شما درست کار نکند . 

برای این منظور در jQuery از متد $.noConflict استفاده می شود . با استفاده از این متد دیگر نیاز به بکار بردن علامت $ در کدهای jQuery نبوده و می توانید آن را حذف نمایید . سپس از این علامت در کدهای سایر فریم ورک ها به راحتی و بدون اختلال jQuery استفاده نمایید .
شکل کلی استفاده متد $.noConflict به صورت زیر است :

$.noConflict ( ) ;

مثال زیر کاربرد متد $.noConflict را نشان میدهد .

var jq=$.noConflict();

متد ( ) data در jQuery

متد data ، می تواند اطلاعاتی را به یک عنصر مورد نظر اضافه کرده و یا اینکه اطلاعات آن را خوانده و به صفحه بازگرداند .
نکته : برای حذف اطلاعات اضافه شده از متد ( ) removeData استفاده نمایید .

• خواندن و برگرداندن اطلاعات یک عنصر با استفاده از متد data :

به وسیله متد data می توانید اطلاعات موجود در یک عنصر HTML را خوانده و به صفحه بر گردانید . 
شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :

Syntax     $( selector ).data ( name ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .     

name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را خوانده و به صفحه بر گردانید .
استفاده از این پارامتر اختیاری است .     

•  اضافه کردن اطلاعات به یک عنصر توسط متد ( ) data :

به وسیله متد ( ) data می توان اطلاعات مورد نظر خود را به یک عنصر در صفحه اضافه نمایید .
شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :

$( selector ).data ( name , value ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .     
name : این پارامتر تعیین کننده نام اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .
استفاده از این پارامتر اجباری است .     
value : این پارامتر تعیین کننده اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .
استفاده از این پارامتر اجباری است .    

 مثال زیر کاربرد متد data را نشان میدهد . 

$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});

متد each در jQuery 

متد each ، یک تابع را تعیین کرده و به ازای هر عنصری که با مشخصات داده شده در پارامتر selector$ مطابقت داشته باشد ، یکبار اجرا می کند .
شکل کلی استفاده از متد each به صورت زیر است :

Syntax $( selector ).each( function( index,element ) ) ;

selector : این پارامتر تعیین کننده کلاس یا تگ عنصرهایی است که می خواهیم تابع مورد نظرمان به ازای هر نمونه از آن ، یکبار اجرا شود . 
index : تعیین کننده اندیس عنصر مورد نظر است . 
element : نشانگر عنصر جاری است . ( "this" هم می تواند استفاده شود ). 

 مثال زیر کاربرد متد each را نشان میدهد . 

$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

افکت ( ) fadeIn در jQuery 

در این بخش از آموزش jquery ، افکت fadeIn را در طراحی سایت آموزش می دهیم.

افکت fadeIn باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید. افکت fadeIn در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .
بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند . شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).fadeIn ( speed , callback )

selector :selector عنصری است که این افکت باعث نمایان شدن آن می شود . 
speed : این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا 100 ms .
تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است . 

 مثال زیر کاربرد افکت fadeIn را نشان میدهد .

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

با کلیک روی هر button عمل fadein شدن بر روی تگ هایی که ای دی انها div1,div2,dive3 است با سرعت های متفاوت انجام می شود

افکت ( ) slideToggle در jQuery 

در این بخش از آموزش jquery ، افکت SlideToggle را در طراحی سایت آموزش می دهیم.

افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و افکت slideDown بر روی عنصر مورد اثر خود عمل می کند .
به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
افکت slideToggle کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .

کار افکت slideToggle این است که حلقه وار افکت میدهد .

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideToggle ( speed , callback )

selector :selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود . 

speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا 100 ms .
تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است . 

 مثال زیر کاربردافکت slideToggle را نشان میدهد:

$("#flip").click(function(){
$("#panel").slideToggle();
});

افکت ( ) delay در jQuery 

در این بخش از آموزش jquery ، افکت delay را در طراحی سایت آموزش می دهیم.

افکت delay باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .

برای مثال فرض کنید که یک افکت ( ) fadeIn را برای یک عنصر تعیین کرده اید . این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری کنید تا مثلا 3 ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی ازافکت delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :

Syntax $( selector ).delay( speed ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم . 

speed : این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :
MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
Slow : سرعت آهسته .
Fast : سرعت زیاد .
مثال زیر کاربرد افکت delay را نشان میدهد .

$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});

در خط 1  با کلیک روی محتوای تگ button تابع اجرا شود

افکت ( ) slideUp در jQuery 

در این بخش از آموزش jquery ، افکت SlideUp را در طراحی سایت آموزش می دهیم.

افکت slideUp با کاهش تدریجی ارتفاع یک عنصر باعث مخفی شدن آن می شود . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد .

کار افکت slideUp  این است  که کشویی میبندد.

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideUp ( speed , callback )

selector : selector عنصری است که این افکت باعث مخفی شدن آن می شود . 

speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms .
تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است . 

مثال زیر کاربرد افکت slideUp را نشان میدهد:

$("#flip").click(function(){
  $("#panel").slideUp();
});

افکت ( ) slideDown در jQuery 

در این بخش از آموزش jquery ، افکت SlideDown را در طراحی سایت آموزش می دهیم.

افکت slideDown با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .
افکت slideDown بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها درcss برابر با none باشد ، اثر خواهد داشت .

 کار  افکت slideDown این است  که کشویی باز میکند.

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideDown ( speed , callback )

 مثال زیر کاربرد افکت slideDown را نشان میدهد:

$("#pars-soft.ir").click(function(){
$("#panel").slideDown();
});

هر وقت روی محتویات تگی که از ای دی به نام pars-soft.ir استفاده می کند کلیک شود محتویات تگی که از ای دی panel استفاده می کند بصورت اسلایدی نمایش داده شود .